<template>
  <div class="general-view">
    <el-row :gutter="10">
      <el-col :span="18">
        <div class="list-table mb10 view-top">
          <el-descriptions :column="5" size="mini">
            <div slot="title" class="desc-title">
              <i class="el-icon-menu" />{{ $t(company.companyName) }}
            </div>
            <el-descriptions-item label="" :span="5" label-class-name="noLabel" content-class-name="tagLabel">
              <div v-for="(dealTagsRef,index) in dealTagsRefList" :key="index">
                <el-tag effect="dark" size="small">{{ dealTagsRef.configureLabel + ' / ' + dealTagsRef.firstTagLabel + (dealTagsRef.secondTagLabel ? ' / ' + dealTagsRef.secondTagLabel : '') + (dealTagsRef.thirdTagLabel ? ' / ' + dealTagsRef.thirdTagLabel : '') + (dealTagsRef.fourthTagLabel ? ' / ' + dealTagsRef.fourthTagLabel : '') + (dealTagsRef.fifthTagLabel ? ' / ' + dealTagsRef.fifthTagLabel : '') }}</el-tag>
              </div>
            </el-descriptions-item>
            <el-descriptions-item :label="$t('法人代表')">{{ company.legalPerson ? company.legalPerson : '-' }}</el-descriptions-item>
            <el-descriptions-item :label="$t('注册资本')">{{ company.capitalRegistered ? moneyFormat(company.capitalRegistered ,'w') + ' 万' : '-' }}</el-descriptions-item>
            <el-descriptions-item :label="$t('实收资本')">{{ company.actualCapital ? moneyFormat(company.actualCapital ,'w') + ' 万' : '-' }} </el-descriptions-item>
            <el-descriptions-item :label="$t('投前估值')">{{ dealBase.dealBaseEquity.valuationBeforeInvestment ? moneyFormat(dealBase.dealBaseEquity.valuationBeforeInvestment,'w') + ' 万' : '-' }}</el-descriptions-item>
            <el-descriptions-item :label="$t('项目负责人')">{{ dealBase.personChargeName ? dealBase.personChargeName : '-' }}</el-descriptions-item>
            <el-descriptions-item :label="$t('成立时间')">{{ company.setDate ? parseTime(company.setDate) : '-' }}</el-descriptions-item>
            <el-descriptions-item :label="$t('行业')">{{ company.industryFirstLabel ? company.industryFirstLabel : '-' }}</el-descriptions-item>
            <el-descriptions-item :label="$t('聚焦行业')">{{ dealBase.industryFocus ? industryFocusFormat(dealBase) : '-' }}</el-descriptions-item>
            <el-descriptions-item :label="$t('投后预计估值')">{{ dealBase.dealBaseEquity.valuationAfterInvestment ? moneyFormat(dealBase.dealBaseEquity.valuationAfterInvestment,'w') + ' 万' : '-' }}</el-descriptions-item>
            <el-descriptions-item :label="$t('地域')">
              <span v-if="company.provinceRegisteredLabel && company.cityRegisteredLabel">{{ company.provinceRegisteredLabel + '-' + company.cityRegisteredLabel }}</span>
              <span v-else-if="company.provinceRegisteredLabel">{{ company.provinceRegisteredLabel }}</span>
              <span v-else>{{ '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item :label="$t('预计投资时间')">{{ dealBase.dateInvestmentEstimate ? parseTime(dealBase.dateInvestmentEstimate) : '-' }}</el-descriptions-item>
            <el-descriptions-item :label="$t('预计投资金额')">{{ dealBase.amountInvestmentEstimate ? moneyFormat(dealBase.amountInvestmentEstimate ,'w') + ' 万' : '-' }}</el-descriptions-item>
            <el-descriptions-item :label="$t('预计退出时间')">{{ dealBase.dealBaseEquity.estimatedExitTime ? parseTime(dealBase.dealBaseEquity.estimatedExitTime) : '-' }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="5" size="mini">
            <el-descriptions-item :label="$t('企业简介')" :span="5" content-class-name="line-clamp">{{ company.remark ? company.remark : '-' }}</el-descriptions-item>
            <el-descriptions-item :label="$t('项目简介')" :span="5" content-class-name="line-clamp">{{ dealBase.dealIntroduction ? dealBase.dealIntroduction : '-' }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <el-row :gutter="10" class="view-bottom">
          <el-col :span="17" class="left">
            <div class="list-table mb10">
              <div class="area-header">
                <span class="area-header-title">{{ $t('融资历史') }}</span>
              </div>
              <el-table tooltip-effect="darkTable" :data="companyFinanceTycList" border height="calc(100% - 25px)">
                <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('披露日期')" align="center" prop="disclosureTime" min-width="90">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.disclosureTime) }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('交易金额')" align="center" prop="transactionAmount" min-width="90" />
                <el-table-column :label="$t('融资轮次')" align="center" prop="rounds" min-width="80" />
                <el-table-column :label="$t('估值')" align="center" prop="valuation" min-width="90">
                  <template slot-scope="scope">
                    <span>{{ moneyFormat(scope.row.valuation, 'w') }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('比例')" align="center" prop="investmentRatio" min-width="90" />
                <el-table-column :label="$t('投资方')" align="center" prop="investor" min-width="150" show-overflow-tooltip />
              </el-table>
            </div>
            <div class="list-table">
              <div class="area-header">
                <span class="area-header-title">{{ $t('竞品信息') }}</span>
              </div>
              <el-table v-loading="loading" :data="companyPatentsList" border tooltip-effect="darkTable" height="calc(100% - 25px)">
                <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('竞品名')" align="center" prop="jingpinProduct" />
                <el-table-column :label="$t('行业')" align="center" prop="industry" />
                <el-table-column :label="$t('地区')" align="center" prop="location" />
                <el-table-column :label="$t('产品')" align="center" prop="product" />
                <el-table-column :label="$t('投资时间')" align="center" prop="setupDate" width="180">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.setupDate) }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="list-table">
              <div class="area-header">
                <span class="area-header-title" @click="initFolder">{{ $t('项目文档') }}</span>
              </div>
              <div v-loading="treeFolderLoading" class="scrollArea">
                <el-tree v-if="!isEmpty(treeData)" ref="dealFileTree" :data="treeData" :props="defaultProps" :default-expanded-keys="['debt_items','equity_deal','equity_fund','estate_deal','property','spo']" :default-expand-all="false" :node-key="'id'" lazy :load="loadNode" :indent="6">
                  <span slot-scope="{ node, data }" class="custom-tree-node">
                    <!-- 目录 -->
                    <span v-show="!(data.type === 'file' || data.fileType === 'file')" class="titTree">
                      <i :class="isEmpty(data.businessId) ? 'el-icon-fold' : 'el-icon-fold-blue'" />
                      <p>{{ node.label }}</p>
                    </span>
                    <!-- 附件 -->
                    <span v-show="data.type === 'file' || data.fileType === 'file'" class="titTree">
                      <i :class="data.icon" />
                      <!-- 预览文件名 -->
                      <p v-show="data.type === 'file' || data.fileType === 'file'" @click="$refs.OnlinePreview.onlinePreviewFile(data.id, 'view')">{{ node.label || data.label }}</p>
                      <!-- 加载更多 -->
                      <!--<p v-show="data.type === 'more'">{{ data.label }}</p>-->
                    </span>
                  </span>
                </el-tree>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <div class="list-table mb10 view-top">
          <div class="area-header">
            <span class="area-header-title">{{ $t('新闻舆情') }}</span>
          </div>
          <div class="infinite-list-wrapper">
            <ul
              v-infinite-scroll="load"
              class="list"
              infinite-scroll-disabled="disabled"
            >
              <li v-for="(v, i) in newList" :key="i" class="list-item">
                <div class="con">
                  <div class="tit" @click="openNews(v.newUrl)">{{ v.newTitle }}</div>
                  <div class="des">
                    <span v-if="v.emotion=='-1'" class="type type1">{{ $t('负面') }}</span>
                    <span v-else-if="v.emotion=='1'" class="type type0">{{ $t('正面') }}</span>
                    <span v-else-if="v.emotion=='0'" class="type type2">{{ $t('中性') }}</span>
                    <i v-for="ele in v.tag" :key="ele">{{ ele }}</i>
                    <span>{{ $t('来源') }}:{{ v.newSource }}</span>
                    <span>{{ $t('发布时间') }}:{{ parseTime(v.newTime) }}</span>
                  </div>
                </div>
              </li>
            </ul>
            <p v-if="loading" class="loadTxt">加载中...</p>
            <p v-if="noMore" class="loadTxt">没有更多了</p>
          </div>
        </div>
        <div v-loading="trackLoading" class="list-table view-bottom">
          <div class="area-header flex">
            <span class="area-header-title">{{ $t('项目跟踪') }}</span>
            <span class="el-icon-plus link-style" @click="addHandle" />
          </div>
          <el-timeline class="scrollArea">
            <div v-for="item in dealTrackList" :key="item.id">
              <div class="progressItem" style="width: 100%;" @click="updateHandle(item)">
                <div v-if="item.msgCount > 1" class="msgCount">
                  <svg-icon icon-class="message" />
                  <span class="icon">{{ item.msgCount }}</span>
                </div>
                <p class="tit">
                  <span class="text">{{ formatText(item.details) }}</span>
                </p>
                <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item) }}</el-tag>
                <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item) }}</el-tag>
                <div class="bottom">
                  <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                  <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
                </div>
              </div>
            </div>
          </el-timeline>
        </div>
      </el-col>
    </el-row>
    <el-dialog :title="$t('项目跟踪')" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm dealTrackDialog" append-to-body>
      <dealTrackForm ref="dealTrackForm" :deal-id="dealTrackId" :is-deal="false" />
    </el-dialog>

    <!-- 附件预览 -->
    <OnlinePreview ref="OnlinePreview" />
  </div>
</template>
<script>
import { findLeftList, findListMobile } from '@/api/file/filefolder/folder'
import dealTrackForm from '@/views/deal/track/dealTrackForm.vue'
import { getDealBase } from '@/api/base/deal/dealBase'
const { getDealBeforeInfo } = require('@/api/deal/home/dealBefore')
export default {
  components: {
    dealTrackForm
  },
  data() {
    return {
      formOpen: false,
      trackLoading: false,
      // 项目信息
      dealBase: {},
      // 公司信息
      company: {},
      // 项目标签
      dealTagsRefList: [],
      // 新闻舆情
      newList: [],
      // 融资历史
      companyFinanceTycList: [],
      // 竞品信息
      companyPatentsList: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'leaf'
      },
      // 资料收集数据
      treeData: [],
      // 资料收集这盖层
      treeFolderLoading: false,
      // 每次最多加载附件数量
      treeFolderPageSize: 5,
      loading: false,
      // 项目跟踪列表
      dealTrackList: [],
      // 事项类型字典
      itemTypeOptions: [],
      // 跟踪方式字典
      trackModeOptions: [],
      // 聚焦行业字典
      industryFocusOptions: [],
      dealTrackId: ''
    }
  },
  computed: {
    noMore() {
      return true
    },
    disabled() {
      return true
    }
  },
  created() {
    // 查询投前概览数据列表
    this.load()
    // 加载资料收集目录(懒加载)
    this.initFolder()
    this.getDicts('deal_industry_focus').then(response => {
      this.industryFocusOptions = response.data
    })
    this.getDicts('item_type').then(response => {
      this.itemTypeOptions = response.data
    })
    this.getDicts('track_mode').then(response => {
      this.trackModeOptions = response.data
    })
  },
  methods: {
    load() {
      this.loading = true
      // 查询投前概览汇总数据
      getDealBeforeInfo(this.$route.query.id, this.$route.query.companyId).then(response => {
        this.dealBase = response.data.dealBase
        this.company = response.data.dealBase.company
        this.dealTagsRefList = response.data.dealTagsRefList
        this.companyFinanceTycList = response.data.companyFinanceTycList
        this.dealTrackList = response.data.dealTrackList
        this.companyPatentsList = response.data.companyCompetitorList
        this.newList = response.data.companyNewsList
        this.loading = false
      })
    },
    getList() {
      this.trackLoading = true
      getDealBeforeInfo(this.$route.query.id, this.$route.query.companyId).then(response => {
        this.dealTrackList = response.data.dealTrackList
        this.trackLoading = false
      })

      // this.loading = false
    },
    // 聚焦行业 字典deal_industry_focus字典翻译
    industryFocusFormat(row) {
      return this.selectDictLabel(this.industryFocusOptions, row.industryFocus)
    },
    // 事项类型 字典item_type字典翻译
    itemTypeFormat(row) {
      return this.selectDictLabel(this.itemTypeOptions, row.itemType)
    },
    // 跟踪方式 字典track_mode字典翻译
    trackModeFormat(row) {
      return this.selectDictLabel(this.trackModeOptions, row.trackMode)
    },
    // 加载资料收集目录(懒加载, 但那个目录加载目录下的文件)
    initFolder() {
      // 如果是从报表等跳进来的. 没有项目类型就查一下
      if (this.isEmpty(this.$route.query.dealType)) {
        getDealBase(this.$route.query.id).then(response => {
          console.log(response.data)
          this.$route.query.dealType = response.data.dealType
          this.initFolderStart()
        })
      } else {
        this.initFolderStart()
      }
    },
    initFolderStart() {
      this.treeFolderLoading = true
      findLeftList({ id: this.$route.query.dealType, businessId: this.$route.query.id, parentId: '0' }).then(response => {
        console.log('加载项目文档')
        this.treeData = []
        if (response.data) {
          this.treeData = response.data
        }
        this.treeFolderLoading = false
      })
    },
    // 懒加载附件, 对鬼畜子目录及加载出该目录下的附件
    loadNode(node, resolve) {
      console.log(node)
      if (this.isEmpty(this.treeData)) {
        return resolve([])
      }
      if (node.level === 0) {
        return resolve(this.treeData)
      } else {
        if (node.data.type !== 'file') {
          findListMobile({ businessId: this.$route.query.id, parentId: node.data.id, belong: node.data.belong, pageNum: 1, pageSize: 9999 }).then(response => {
            if (response.rows) {
              response.rows.forEach(item => {
                item.label = item.name
              })
              resolve(response.rows)
              // 如果是文件去掉展开箭头
              response.rows.forEach(item => {
                if (item.fileType === 'file') {
                  var node1 = this.$refs.dealFileTree.getNode(item.id)
                  if (node1) {
                    delete node1.childNodes
                    node1.isLeaf = true
                  }
                }
              })
            } else {
              resolve()
            }
          })
        }
      }
    },
    formatText(htmlStr) {
      if (!htmlStr) return ''
      return htmlStr.replace(/<\/?.+?>/g, '').replace(/ /g, '').replace(/&nbsp;/ig, '')
    },
    updateHandle(row) {
      this.dealTrackId = this.$route.query.id
      this.formOpen = true
      this.$nextTick(() => {
          // 调用form页面的 init 方法初始化数据
          this.$refs.dealTrackForm.init(row)
      })
    },
    addHandle() {
      this.dealTrackId = this.$route.query.id
      this.formOpen = true
      this.$nextTick(() => {
          // 调用form页面的 init 方法初始化数据
          this.$refs.dealTrackForm.init(null)
      })
    },
    openNews(url) {
      window.open(url, '_blank')
    }

  }
}
</script>
<style lang="scss" scoped>
.link-style{
  color: #1890ff;
  font-size: 13px;
  cursor: pointer;
}
.flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ml10{
  margin-left: 10px;
}
/deep/ .dealTrackDialog .el-dialog__body {
    padding: 0 !important;
}
.desc-title{
  display: flex;
  align-items: center;
  column-gap: 5px;
  i{
    color: #409eff;
    font-size: 20px;
  }
}
.font13{
  font-size: 13px;
}
.text{
  display: -webkit-box;
  -webkit-line-clamp: 5;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-all;
  font-size: 13px;
}
.general-view{
  height: calc(100vh - 100px);
  .el-row, .el-col{
    height: 100%;
    .list-table{
      height: 100%;
    }
  }
  .view-top{
    height: 260px!important;
  }
  .view-bottom{
    height: calc(100% - 260px)!important;;
    .left .list-table{
      height: calc(50% - 5px);
    }
  }
}

/deep/.el-descriptions{
  .noLabel{
    margin-right: 0;
    &::after{
      content: unset!important;
    }
  }
  .tagLabel{
    margin-bottom: 5px;
    flex-wrap: wrap;
    line-height: 2.5;
    .el-tag{
      border-radius: 10px;
      border-color: transparent!important;
      margin-right: 5px;
    }
  }
  .el-descriptions__header{
    margin-bottom: 10px;
  }
}
.infinite-list-wrapper{
  height: calc(100% - 25px);
  overflow: auto;
  margin-right: -15px;
  padding-right: 15px;
  .loadTxt{
    text-align: center;
    font-size: 11px;
    color: #a7a7a7;
  }
  li{
    margin-bottom: 8px;
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 8px;
    display: flex;
    .type{
      background: #ddd;
      height: 17px;
      font-size: 10px;
      padding: 3px 4px;
      color: #fff!important;
      margin-right: 4px;
      border-radius: 3px;
      zoom: 0.9;
      white-space: nowrap;
    }
    .type0{
      background: #0DA708;
    }
    .type1{
      background: #DD2710;
    }
    .type2{
      background: #e6a23c;
    }
    .tit{
      font-weight: bold;
      font-size: 12px;
      margin-bottom: 7px;
      padding-top: 1px;
      color: #409eff;
      cursor: pointer;
    }
    .des{
      display: flex;
      align-items: center;
      span{
        font-size: 11px;
        color: rgba(0,0,0,0.55);
        margin-right: 5px;
      }
      i{
        background-color: #fdf6ec;
        border: 1px solid #e6a23c;
        color: #e6a23c;
        font-size: 10px;
        font-style: normal;
        padding: 2px;
        zoom: 0.8;
        margin-right: 5px;
      }
    }
  }
}
/deep/.el-descriptions--mini {
  font-size: 13px;
}
.titTree{
  display: flex;
  align-items: flex-end;
  font-size: 13px;
  flex: 1;
  overflow: hidden;
  i.el-icon-fold{
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 3px;
  }
  p{
    margin: 0;
    display: inline-block;
    color: rgb(96, 98, 102);
  }
  .file, .el-icon-paperclip{
    color: #5d5d5d;
  }
}
/deep/.el-tree-node__content{
  height: 28px;
}
.scrollArea{
  height: calc(100% - 25px);
  overflow: auto;
  margin-right: -15px;
  padding-right: 15px;
}
.el-timeline{
  .nickName{
    font-size: 13px;
    font-weight: bold;
  }
  .top{
    margin-bottom: 5px;
  }
  .details{
    display: flex;
    align-items: center;
    column-gap: 4px;
    font-size: 12px;
    p{
      margin: 0;
    }
  }
}
/deep/.line-clamp{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.list-table{
  padding-top: 10px;
}
.msgCount{
  position: relative;
  display: inline-block;
  float: right;
  padding: 0 3px 0 0;
  margin-left: 10px;
  .icon{
    background-color: #f56c6c;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    position: absolute;
    right: -8px;
    top: -3px;
    zoom: 0.9;
  }
}
</style>
